<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		#chart1,
		#chart2 {
			width: 1500px;
			height: 1000px;
		}
	</style>
	<script src="js/echarts.js"></script>
</head>

<body>
	<div id="chart1"></div>
	<div id="chart2"></div>
	<script>
		var myChart1 = echarts.init(document.getElementById('chart1'));
		/*
			1、数据到系列的映射。这个是由维度是行还是列来决定的。通过seriesLayoutBy来配置
			2、数据到图形的映射。这个是由哪个维度来决定的。通过encode来配置 
		 */

		/*
			 可以把任意一个维度的数据，映射到图表上任意一个需要数据的地方 
		 */
		myChart1.setOption({
			legend: {},
			tootip: {},
			xAxis: [
				{ type: 'category', gridIndex: 0 },
				{ type: 'category', gridIndex: 1 },
			],
			yAxis: [
				{ gridIndex: 0 },
				{ gridIndex: 1 },
			],
			grid: [
				{ bottom: '55%' },
				{ top: '55%' },
			],
			dataset: {
				source: [
					//一行是一个维度：第一列是维度名，数据从第二列开始；维度名会被解析成系列名。第一行会被解析成X轴的类目名
					['product', '2014', '2015', '2016'],
					['iphone4', 43.3, 85.8, 93.7],
					['iphone5', 83.1, 73.4, 55.1],
					['iphone6', 86.4, 65.2, 82.5],
					['iphone7', 72.4, 53.9, 39.1]
				]
			},
			series: [
				//维度为行
				{ type: 'bar', seriesLayoutBy: 'row' },
				{ type: 'bar', seriesLayoutBy: 'row' },
				{ type: 'bar', seriesLayoutBy: 'row' },
				{ type: 'bar', seriesLayoutBy: 'row' },

				//维度为列
				{ type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
				{ type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
				{ type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
			]
		});


		var myChart2 = echarts.init(document.getElementById('chart2'));
		myChart2.setOption({
			dataset: {
				source: [
					['score', 'amount', 'product'],
					[89.3, 58212, 'Matcha Latte'],
					[57.1, 78254, 'Milk Tea'],
					[74.4, 41032, 'Cheese Cocoa'],
					[50.1, 12755, 'Cheese Brownie'],
					[89.7, 20145, 'Matcha Cocoa'],
					[68.1, 79146, 'Tea'],
					[19.6, 91852, 'Orange Juice'],
					[10.6, 101852, 'Lemon Juice'],
					[32.7, 20112, 'Walnut Brownie']
				]
			},
			grid: { containLabel: true },
			xAxis: { name: 'amount' },
			yAxis: { type: 'category' },
			visualMap: {
				orient: 'horizontal',
				left: 'center',
				min: 10,
				max: 100,
				text: ['High Score', 'Low Score'],
				// Map the score column to color
				dimension: 0,
				inRange: {
					color: ['#D7DA8B', '#E15457']
				}
			},
			series: [
				{
					type: 'bar',
					encode: {
						// Map the "amount" column to X axis.
						x: 'amount',
						// Map the "product" column to Y axis
						y: 'product'
					}
				}
			]
		});
	</script>
</body>

</html>
